<template>
  <div>
    <div style="margin: 50px auto;width: fit-content">
      <el-input v-model="filter.id" type="text" placeholder="请输入搜索的用户id" style="width: 800px;margin-right: 10px" />
      <el-button type="primary" style="margin: 10px 5px" icon="el-icon-search" @click="search()">搜索</el-button>
      <el-button type="info" style="margin: 10px 5px" icon="el-icon-setting" @click="handleAdvancedSearch()">高级搜索</el-button>
      <el-button type="info" style="margin: 10px 5px" icon="el-icon-delete" @click="handleClear()">清除筛选</el-button>
    </div>
    <div>
      <el-dialog :title="title" :visible.sync="dialogFormVisible" center>
        <el-form :model="form">
          <el-form-item label="冰箱id" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="精确匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-input v-model="form.id" autocomplete="off" :disabled="title!=='高级搜索'" style="width: 80%" />
          </el-form-item>
          <el-form-item label="冰箱名" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="模糊匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-input v-model="form.name" autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item v-show="title === '添加冰箱'" label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" show-password autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item v-show="title === '添加冰箱'" label="确认密码" :label-width="formLabelWidth">
            <el-input v-model="form.confirm" show-password autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item label="生产日期" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="精确匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-date-picker
              v-model="form.createTime"
              type="date"
              placeholder="无效日期"
              style="width: 80%"
            />
          </el-form-item>
          <el-form-item label="激活日期" :label-width="formLabelWidth" v-show="title==='高级搜索'||title === '编辑冰箱'">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="精确匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-date-picker
              v-model="form.activeTime"
              type="date"
              placeholder="无效日期"
              style="width: 80%"
            />
          </el-form-item>
          <el-form-item label="保修时间（天）" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="模糊匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-input v-model="form.guarantee" autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item label="绑定用户id" :label-width="formLabelWidth" v-if="title==='编辑冰箱'||title==='高级搜索'">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="模糊匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <!--            <el-input v-model="form.userId" autocomplete="off" style="width: 80%" />-->
            <el-select
              v-model="form.userId"
              filterable
              remote
              placeholder="请输入用户手机"
              :remote-method="searchUserByPhone"
              :loading="loading"
              style="width: 80%">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="'用户名: '+item.username+'  手机号:'+item.phone"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleDialogConfirm()">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <el-table
      :data="rows"
      style="width: 100%"
      border
    >
      <el-table-column
        prop="id"
        label="序列号"
        width="100"
        align="center"
      />
      <el-table-column
        prop="name"
        label="冰箱名"
        width="180"
        align="center"
      />
      <el-table-column
        prop="createTime"
        label="生产日期"
        width="220"
        align="center"
      >
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.createTime"
            type="date"
            placeholder="无效日期"
            disabled="true"
            style="width: 200px"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="activeTime"
        label="生产日期"
        width="220"
        align="center"
      >
        <template slot-scope="scope">
          <el-date-picker
            v-if="scope.row.activeTime !== undefined && scope.row.activeTime !== null"
            v-model="scope.row.activeTime"
            type="date"
            placeholder="无效日期"
            disabled="true"
            style="width: 200px"
          />
          <div v-else style="text-align: center;justify-content: center">
            <el-tag size="medium" type="danger">未激活</el-tag>
          </div>
        </template>
      </el-table-column>
      <!--      <el-table-column-->
      <!--        prop="出厂日期"-->
      <!--        label="性别"-->
      <!--        width="180"-->
      <!--        :formatter="formatGender"-->
      <!--        align="center"-->
      <!--      />-->
      <el-table-column
        prop="guarantee"
        label="保修期"
        width="100"
        align="center"
        :formatter="formatGuarantee"
      />
      <el-table-column
        prop="userId"
        label="绑定用户id"
        align="center"
        width="100"
      />
      <el-table-column
        prop="activeCode"
        label="激活码"
        align="center"
      />
      <el-table-column
        label="操作"
        align="center"
      >
        <templated slot-scope="{row,$index}">
          <el-button type="success" icon="el-icon-refresh-right" size="mini" @click="handleRecover(row,$index)">恢复</el-button>
          <el-button type="info" icon="el-icon-lock" size="mini" @click="handleResetPass(row,$index)">重置密码</el-button>
          <el-button type="warning" icon="el-icon-edit" size="mini" @click="handleModify(row,$index)">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row,$index)">删除</el-button>
        </templated>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="index"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px;text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'DeletedTable',
  data() {
    return {
      options: [],
      list: [],
      loading: false,
      rows: [],
      filter: {
        id: '',
        realName: '',
        username: '',
        email: '',
        phone: '',
        gender: null
      },
      formLabelWidth: '120px',
      title: '',
      dialogFormVisible: false,
      total: 100,
      size: 5,
      index: 1,
      form: {
        id: '',
        realName: '',
        username: '',
        email: '',
        phone: '',
        gender: '',
        avatar: ''
      }
    }
  },
  created() {
    this.search()
  },
  methods: {
    searchUserByPhone(query)
    {
      if (query !== '') {
        this.loading = true;
        var that = this
        setTimeout(() => {
          this.loading = false;
          this.$api.user_active.search({phone:query},0,10).then(res=>{
            that.options = res.data.rows
          })
        }, 200);
      } else {
        this.options = [];
      }
    },
    handleClear() {
      this.filter = {
        id: '',
        name: '',
        createTime: '',
        activeTime: '',
        guarantee: '',
        userId: '',
        activeCode: ''
      }
      this.search()
    },
    async handleResetPass(row, index) {
      const res = await this.$api.fridge_active.resetPass(row.id)
      await this.$alert('请记录新密码：' + res.data.password, '新密码', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'success',
            message: `密码重置成功`
          })
        }
      })
    },
    async handleDelete(row, index) {
      this.$confirm('此操作将永久删除该冰箱, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await this.$api.fridge_delete.deleted({ id: row.id })
        this.$message({
          type: 'success',
          message: res.message
        })
        this.search()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleAvatarSuccess(res) {
      this.form.avatar = res.data.address
    },
    handleAdvancedSearch() {
      this.title = '高级搜索'
      this.form = this.filter
      this.dialogFormVisible = true
    },
    handleModify(row, index) {
      this.title = '编辑冰箱'
      this.dialogFormVisible = true
      this.form = row
    },
    async handleInvalid(row, index) {
      const res = await this.$api.fridge_delete.valid({ id: row.id })
      this.search()
      this.$message.success(res.data.message)
    },
    search() {
      const that = this
      this.$api.fridge_delete.search(this.filter, this.index, this.size).then(response => {
        // console.log(response.data.rows)
        that.rows = response.data.rows
        // console.log(that.rows)
        // console.log(response.data.total)
        that.total = response.data.total
        // console.log(that.total)
      })
    },
    async handleRecover(row, index) {
      const res = await this.$api.fridge_delete.valid({ id: row.id })
      this.$message.success(res.message)
      this.search()
    },
    handleSizeChange(val) {
      this.size = val
      this.search()
    },
    handleCurrentChange(val) {
      this.index = val
      this.search()
    },
    beforeAvatarUpload(file) {
      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png')
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    async handleDialogConfirm() {
      switch (this.title) {
        case '编辑冰箱': {
          const edit = await this.$api.fridge_active.update({ id: this.form.id }, this.form)
          this.search()
          this.$message.success(edit.message)
          break
        }
        case '高级搜索': {
          this.filter = this.form
          this.search()
          break
        }
        default: {
          this.$message.error('系统故障！')
        }
      }
      this.dialogFormVisible = false
    },
    formatGender(row, column) {
      switch (row.gender) {
        case 1:
          return '男'
        case 0:
          return '女'
        default:
          return '未知'
      }
    },
    formatGuarantee(row, column) {
      return row.guarantee.toString() + ' 天'
    }
  }
}
</script>

<style scoped>

</style>
